<script setup lang="ts">
import { ref, reactive } from 'vue'
const curIndex = ref(0)
const curTabName = ref('canyin')
const navRef = ref();
const tabList = reactive([
    {
        name: 'canyin',
        text: '美食餐饮'
    },
    {
        name: 'yingshi',
        text: '影视娱乐'
    },
    {
        name: 'tiyu',
        text: '体育活动'
    },
    {
        name: 'yinyue',
        text: '音乐美术'
    },
    {
        name: 'other',
        text: '其他卡券'
    },
]);
const datatab = reactive([
    [
        {
            title: '美团外卖102222元无门槛美团外卖102222元无门槛美团外卖102222元无门槛美团外卖102222元无门槛',
            price: '10.20',
            sales: '1521',
        },
        {
            title: '美团外卖10333元无门槛',
            price: '10.20',
            sales: '1521',
        },
    ],
    [
        {
            title: '美团外卖333元无门槛',
            price: '10.20',
            sales: '1521',
        }
    ],
    [
        {
            title: '美团外卖4元无门槛',
            price: '10.20',
            sales: '1521',
        }
    ],
    [
        {
            title: '美团外卖5元无门槛',
            price: '10.20',
            sales: '1521',
        }
    ], [
        {
            title: '美团外卖6元无门槛',
            price: '10.20',
            sales: '1521',
        }
    ]
])
const loading = ref(false);
const tabClick = (name: string, index: number) => {
    curIndex.value = index;
    curTabName.value = name;
    console.log(navRef.value);
}
const onLoad = () => {

}

const goBuy = (item: any) => {
    console.log(item);
}
</script>

<template>
    <div class="mentions">
        <div class="show-content">
            <div class="content wrap">
                <div class="title">卡券购买</div>
                <div class="tab-nav" :ref="navRef">
                    <div
                        class="tab-item"
                        :class="{ tabactive: index === curIndex }"
                        v-for="item,index in tabList"
                        @click="tabClick(item.name, index)"
                    >
                        <span>{{ item.text }}</span>
                    </div>
                </div>
                <div class="tab-wrap">
                    <div class="tab-centent" v-for="item,index in tabList">
                        <div v-if="index === curIndex">
                            <div class="card-item" v-for="item in datatab[curIndex]">
                                <div class="card-img">
                                    <img src="@/assets/img/1.png" alt="tupian" />
                                </div>
                                <div class="card-info">
                                    <div class="c-title">{{ item.title }}</div>
                                    <div class="c-sales">销量:{{ item.sales }}</div>
                                    <div class="c-price">￥ {{ item.price }}</div>
                                </div>
                                <div class="card-buy" @click="goBuy(item)">购买</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="less">
.wrap {
    height: 100%;
    box-sizing: border-box;
}
.tab-nav {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    background-color: #fffaf4;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    margin-bottom: -20px;
    padding-bottom: 20px;
    .tab-item {
        flex: none;
        width: 100px;
        height: 42px;

        background: #ffffff;
        border-radius: 65px;

        border-radius: 65px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 13px;
        overflow: hidden;
        span {
            display: inline-block;
            font-size: 13px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #d0d0d0;
            line-height: 42px;
        }
    }

    .tabactive {
        background: #df3030;
        box-shadow: 0px 11px 15px 0px rgba(255, 138, 35, 0.2);
        span {
            color: #ffffff;
        }
    }
}
.tab-nav::-webkit-scrollbar {
    display: none;
}

.tab-wrap {
    padding-top: 24px;
}
.tab-centent {
    .card-item {
        display: flex;
        flex-direction: row;
        // height: 124px;
        background: #ffffff;
        border-radius: 24px;
        margin-bottom: 24px;
        padding: 22px 15px;
        box-sizing: border-box;
        position: relative;
        border: 3px solid #ffffff;
        .card-img {
            width: 74px;
            height: 74px;
            margin-right: 16px;
            img {
                display: inline-block;
                height: 100%;
                width: 100%;
            }
        }

        .card-info {
            flex: 1;
            overflow: hidden;
            display: flex;
            flex-direction: column;

            .c-title {
                display: inline-block;
                font-size: 17px;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #10242c;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin-bottom: 3px;
            }

            .c-sales {
                font-size: 15px;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #d1d1d1;
                line-height: 20px;
                margin-bottom: 5px;
            }

            .c-price {
                font-size: 17px;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #f44336;
                line-height: 24px;
            }
        }
        .card-buy {
            position: absolute;
            bottom: 18px;
            right: 16px;
            width: 56px;
            height: 42px;
            background: #df3030;
            border-radius: 7px;
            font-size: 17px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #ffffff;
            line-height: 42px;
            text-align: center;
            z-index: 100;
        }
    }

    .card-item:hover {
        background: #ffffff;
        box-shadow: 0px 20px 40px 0px rgba(255, 138, 35, 0.05);
        border-radius: 24px;
        border: 3px solid rgba(255, 138, 35, 0.1);
    }
}
</style>